<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
    
    <!-- 基本信息 -->
    <title>SceneLingo - 沉浸式场景化英语学习</title>
    <meta name="description" content="SceneLingo 革命性场景化英语学习体验，通过AI智能生成的沉浸式学习场景，让英语学习像看电影一样生动有趣。" />
    <meta name="keywords" content="SceneLingo,场景化学习,英语学习,AI英语,语音识别,英语发音,单词学习,沉浸式学习,场景英语" />
    <meta name="author" content="SceneLingo Team" />
    
    <!-- PWA 支持 -->
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#8b5cf6" />
    <meta name="msapplication-TileColor" content="#8b5cf6" />
    <meta name="msapplication-config" content="/browserconfig.xml" />
    
    <!-- iOS Safari PWA 支持 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="SceneLingo" />
    <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-192x192.png" />
    
    <!-- 图标 -->
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/icons/icon-16x16.png" />
    
    <!-- Open Graph -->
    <meta property="og:title" content="SceneLingo - 场景化英语学习平台" />
    <meta property="og:description" content="革命性的场景化英语学习应用，通过智能生成的学习场景进行沉浸式英语学习。" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/og-image.png" />
    <meta property="og:url" content="https://scenelingo.minimax.io" />
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="SceneLingo" />
    <meta name="twitter:description" content="革命性的场景化英语学习应用" />
    <meta name="twitter:image" content="/og-image.png" />
    
    <!-- 移动端优化 -->
    <meta name="format-detection" content="telephone=no" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="HandheldFriendly" content="true" />
    
    <!-- 性能优化 -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="dns-prefetch" href="https://api.openai.com" />
    
    <!-- 安全 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https:; connect-src 'self' https:; media-src 'self' blob:;" />
    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
    <meta http-equiv="X-Frame-Options" content="DENY" />
    <meta http-equiv="X-XSS-Protection" content="1; mode=block" />
    
    <!-- 加载样式 -->
    <style>
      /* 加载动画 */
      .initial-loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 1;
        transition: opacity 0.5s ease-out;
      }
      
      .loading-hidden {
        opacity: 0;
        pointer-events: none;
      }
      
      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid #e2e8f0;
        border-top: 3px solid #8b5cf6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      /* 防止闪烁 */
      body {
        margin: 0;
        padding: 0;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      
      #root {
        min-height: 100vh;
      }
      
      /* 移动端适配 */
      @media (max-width: 768px) {
        body {
          user-select: none;
          -webkit-user-select: none;
          -webkit-touch-callout: none;
          -webkit-tap-highlight-color: transparent;
        }
      }
    </style>
  </head>
  
  <body>
    <!-- 初始加载动画 -->
    <div id="initial-loading" class="initial-loading">
      <div class="loading-spinner"></div>
    </div>
    
    <!-- 应用根节点 -->
    <div id="root"></div>
    
    <!-- 加载脚本 -->
    <script type="module" src="/src/main.tsx"></script>
    
    <!-- 初始化加载脚本 -->
    <script>
      // 隐藏加载动画
      window.addEventListener('load', function() {
        setTimeout(function() {
          const loading = document.getElementById('initial-loading');
          if (loading) {
            loading.classList.add('loading-hidden');
            setTimeout(function() {
              loading.remove();
            }, 500);
          }
        }, 100);
      });
      
      // PWA 安装提示
      let deferredPrompt;
      window.addEventListener('beforeinstallprompt', (e) => {
        e.preventDefault();
        deferredPrompt = e;
        
        // 显示安装按钮（可以在应用中实现）
        console.log('PWA 安装提示可用');
      });
      
      // 处理移动端视口
      function setVH() {
        const vh = window.innerHeight * 0.01;
        document.documentElement.style.setProperty('--vh', `${vh}px`);
      }
      setVH();
      window.addEventListener('resize', setVH);
      
      // 禁止移动端缩放
      document.addEventListener('gesturestart', function(e) {
        e.preventDefault();
      });
      
      document.addEventListener('gesturechange', function(e) {
        e.preventDefault();
      });
      
      document.addEventListener('gestureend', function(e) {
        e.preventDefault();
      });
    </script>
  </body>
</html>